<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}

		#box1 {
			width: 100px;
			height: 100px;
			background-color: red;
			position: absolute;
			left: 0;
		}

		#box2 {
			width: 100px;
			height: 100px;
			background-color: yellow;
			position: absolute;
			left: 0;
			top: 200px;
		}
	</style>
	<script type="text/javascript" src="js/tools.js"></script>
	<script type="text/javascript">

		window.onload = function () {

			//获取box1
			var box1 = document.getElementById("box1");
			//获取btn01
			var btn01 = document.getElementById("btn01");

			//获取btn02
			var btn02 = document.getElementById("btn02");


			//点击按钮以后，使box1向右移动（left值增大）
			btn01.onclick = function () {
				move(box1, "left", 800, 20);
			};


			//点击按钮以后，使box1向左移动（left值减小）
			btn02.onclick = function () {
				move(box1, "left", 0, 10);
			};


			//获取btn03
			var btn03 = document.getElementById("btn03");
			btn03.onclick = function () {
				move(box2, "left", 800, 10);
			};

			//测试按钮
			var btn04 = document.getElementById("btn04");
			btn04.onclick = function () {
				//move(box2 ,"width", 800 , 10);
				//move(box2 ,"top", 800 , 10);
				//move(box2 ,"height", 800 , 10);
				move(box2, "width", 800, 10, function () {
					move(box2, "height", 400, 10, function () {
						move(box2, "top", 0, 10, function () {
							move(box2, "width", 100, 10, function () {

							});
						});
					});
				});
			};
		};

			//定义一个变量，用来保存定时器的标识
		/*
		 * 目前我们的定时器的标识由全局变量timer保存，
		 * 	所有的执行正在执行的定时器都在这个变量中保存
		 */
			//var timer;




	</script>
</head>

<body>

	<button id="btn01">点击按钮以后box1向右移动</button>
	<button id="btn02">点击按钮以后box1向左移动</button>
	<button id="btn03">点击按钮以后box2向右移动</button>
	<button id="btn04">测试按钮</button>

	<br /><br />

	<div id="box1"></div>
	<div id="box2"></div>

	<div style="width: 0; height: 1000px; border-left:1px black solid; position: absolute; left: 800px;top:0;"></div>

</body>

</html>